<!DOCTYPE html>
<html lang="zh-cn" ng-app="actionApp">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="x-ua-compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>实战</title>
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" >
    <link href="jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet">
    <style type="text/css">
        .content {
            padding: 100px 15px;
            text-align: center;
        }
    </style>
</head>
<body>
<!--使用bootstrap 定义的导航,并配合angularJS的路由,通过路由名称#/oper 和 #/directive 切换视图;-->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#/oper">后台交互</a></li>
                <li><a href="#/directive">自定义指令</a></li>
            </ul>
        </div>
    </div>
</nav>

<!--通过<ng-view></ng-view>展示载入的页面-->
<div class="content">
    <ng-view></ng-view>
</div>

<script src="js/jquery-3.2.1.js"></script>
<script src="jquery-ui-1.12.1/jquery-ui.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js-action/app.js"></script>
<script src="js-action/controllers.js"></script>
<script src="js-action/directive.js"></script>

</body>
</html>